<template>
    <div>
        <Tabs type="card" @on-click="changeTab($event)">
            <TabPane v-for="item in dateList" :key="item.id" :label="item.name">
                <div class="dishesBox" :style="{ height: `${height}px` }">
                    <div class="dishTag" v-for="(item, index) in dishData" :key="index"  @click="addDishes(item)">
                        <div style="float: left; margin-right: 5px;">{{ item.dishName }}</div>
                        <div class="sum">
                            <Icon type="ios-person-add-outline" size="17"/>
                           <div>
                            {{item.sum}}
                           </div>
                        </div>
                    </div>
                </div>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dateList: [
                {
                    name: '周',
                    id: 1,
                    value: 'week'
                }, {
                    name: '近一个月',
                    id: 2,
                    value: 'month'

                }, {
                    name: '近一年',
                    id: 3,
                    value: 'year'
                }
            ],
        }
    },
    props: {
        height: {
            type: Number,
            default: 200
        },
        dishData: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        changeTab(num) {
            console.log(this.dateList[num].value);
            this.$emit('changeTab', this.dateList[num].value)
        },
        // 添加菜肴
        addDishes(item) {
            this.$emit('addDishes', item)
        }
    }
}
</script>
<style scoped lang="less">
/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 2px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 255, 255, 0.4);
}

.dishesBox {
    border: 1px solid #d7dde4;
    border-top: 0;
    border-radius: 4px;
    padding: 10px;
    overflow: auto;
}

.dishTag {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 0 10px;
    line-height: 24px;
    color: #3399ff !important;
    border: 1px solid #3399ff !important;
    border-radius: 3px;
    .sum {
        float: left;
        display: flex;
        align-items: center;
    }
}
</style>